<script setup>
import avatar from "@/assets/images/home/avatar.png";
import {ref, onBeforeUnmount} from "vue";
// import MCropper from "@/components/MCropper";
// import { formatBytes } from "@pureadmin/utils";

defineOptions({
  name: "Cropping"
});

const infos = ref();
const refCropper = ref();
const showPopover = ref(false);
const cropperImg = ref("");

function onCropper({base64, blob, info}) {
  infos.value = info;
  cropperImg.value = base64;
}

onBeforeUnmount(() => {
});
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span class="font-medium">
          图片裁剪，基于开源的
          <el-link
              href="https://fengyuanchen.github.io/cropperjs/"
              target="_blank"
              style="margin: 0 4px 5px; font-size: 16px"
          >
            cropperjs
          </el-link>
          进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
        </span>
      </div>
    </template>
    <div class="flex">
      <MCropper
          ref="refCropper"
          class="w-[500px]"
          :src="avatar"
          circled
          @cropper="onCropper"
          @readied="showPopover = true"
      />
      <div class="ml-10 flex flex-col justify-center" v-loading="!showPopover" element-loading-background="transparent">
        <el-image
            style="user-select: none;width: 200px;height: 200px"
            :src="cropperImg"
            fit="cover"
        />
        <div v-if="infos" class="mt-10">
          <p>
            图像大小：{{ parseInt(infos.width) }} ×
            {{ parseInt(infos.height) }}像素
          </p>
        </div>
      </div>
    </div>
  </el-card>
</template>